<template>
	<view>
		<view class="nav-bar">
			<view class="left">
				<image src="../../../static/back_icon.png" @tap="back" mode=""></image>
			</view>
			<view class="center">
				我的银行卡
			</view>
			<view class="right" @tap="income">
				添加银行卡
			</view>
		</view>
		<view class="bankCardList">
			<view class="list-item">
				<view class="uni-list-bot" v-for="(item,index) in 2" :key="index">
					<view class="top">
						<image src="/static/earnings/yinhang.png" mode="widthFix"></image>
						<view class="bankBox">
							<view class="bankName">
								<!-- {{item.bank}} -->
								招商银行
							</view>
							<view class="bankType">
								<!-- {{item.cardType}} -->
								储蓄卡
							</view>
						</view>
					</view>
					<view class="bankNum">
						<!-- {{item.bankCard}} -->
						231313151456456
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cardList: [],
				isWithdtaw: ""
			}
		},
		methods: {
			//导航方法
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			income(){
				uni.navigateTo({
					url:"/pages/earnings/addBank/addBank"
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		height: 128upx;
		padding: 40upx 28upx 0;
		background: #E8271B;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		z-index: 9;
	
		.left {
			width: 160upx;
	
			image {
				display: block;
				width: 48upx;
				height: 48upx;
			}
		}
	
		.center {
			width: 180upx;
			line-height: 70px;
			font-size: 36upx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	
		.right {
			width: 160upx;
			font-size: 32upx;
			font-weight: 500;
			line-height: 70px;
			color: rgba(255, 255, 255, 1);
		}
	}
	.bankCardList {
		width: 100%;
		min-height: 100vh;
		padding-top: 158upx;
		background-color: #f2f2f2;

		.list-item {
			width: 694upx;
			margin: 0 auto;

			.uni-list-bot {
				background-color: #fff;
				margin-bottom: 20upx;
				border-radius: 20upx;
				padding: 30upx;

				.top {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 68upx;
						height: 68upx;
					}

					.bankBox {
						margin-left: 20upx;

						.bankName {
							color: #4d4d4d;
							font-size: 32upx;
						}

						.bankType {
							font-size: 24upx;
							color: #999;
						}
					}
				}

				.bankNum {
					color: #404040;
					font-size: 48upx;
					font-weight: bold;
					padding-left: 75upx;
					box-sizing: border-box;
					margin-top: 15upx;
				}
			}
		}
	}
</style>
